<template>
    <div id="teamAddPage">
        <van-form @submit="onSubmit">
            <van-cell-group inset title="创建队伍">
                <van-field
                    v-model="addTeamData.name"
                    name="name"
                    label="队伍名"
                    required
                    placeholder="请输入队伍名"
                    :rules="[{ required: true, message: '请填写队伍名' }]"
                />
                <van-field
                    v-model="addTeamData.description"
                    name="description"
                    rows="4"
                    autosize
                    label="队伍描述"
                    maxlength="512"
                    show-word-limit
                    type="textarea"
                    placeholder="请输入队伍描述"
                />
                <van-field
                    v-model="addTeamData.expireTime"
                    is-link
                    readonly
                    name="expireTime"
                    label="过期时间"
                    required
                    placeholder="点击选择时间"
                    :rules="[{ required: true, message: '请选择过期时间' }]"
                    @click="showPicker = true"
                />
                <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
                    <van-date-picker
                        :model-value="pickerValue"
                        @confirm="onConfirm"
                        @cancel="showPicker = false"
                    />
                </van-popup>
                <van-field name="maxNum" label="最大人数" required>
                    <template #input>
                        <van-stepper v-model="addTeamData.maxNum" max="20" />
                    </template>
                </van-field>
                <van-field name="status" label="队伍状态" required>
                    <template #input>
                        <van-radio-group v-model="addTeamData.status" direction="horizontal">
                            <van-radio name="0">公开</van-radio>
                            <van-radio name="1">私有</van-radio>
                            <van-radio name="2">加密</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field
                    v-model="addTeamData.password"
                    type="password"
                    name="password"
                    label="密码"
                    placeholder="请输入队伍密码"
                    required
                    :rules="[{ required: true, message: '请填写队伍密码' }]"
                    v-if="addTeamData.status == 2"
                />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup lang="ts">

import { ref } from 'vue'
import myAxios from '../plugins/myAxios.ts'
import { showFailToast, showSuccessToast } from 'vant'
import router from '../router'

const initFormData = {
    "name": "",
    "description": "",
    "expireTime": null,
    "maxNum": 3,
    "password": "",
    "status": 0
}

// 需要用户填写的表单数据
const addTeamData = ref({...initFormData})

const showPicker = ref(false);
const pickerValue = ref([]);
const onConfirm = ({ selectedValues }) => {
    addTeamData.value.expireTime = selectedValues.join('-');
    pickerValue.value = selectedValues;
    showPicker.value = false;
};

const onSubmit = async (values) => {
    try {
        console.log(values);
        const res = await myAxios.post("/team/add", values)
        if (res['code'] === 0) {
            showSuccessToast("创建成功")
            router.back();
        } else {
            showFailToast("创建失败")
        }
    } catch (error) {
        console.error('创建失败', error);
        showFailToast("创建失败")
    }
};

</script>

<style scoped>

</style>